<template>
  <div>
    <div class="card" style="margin-bottom:18px ">
      <el-input v-model="data.gameId" style="width: 280px;margin-right: 10px" placeholder="请输入赛事编号查询" :prefix-icon="Search"/>
      <el-input v-model="data.gameName" style="width: 280px;margin-right: 10px" placeholder="请输入赛事名称查询" :prefix-icon="Search"/>
<!--      <el-input v-model="data.gameType" style="width: 280px;margin-right: 10px" placeholder="请输入赛事类型查询" :prefix-icon="Search"/>-->
      <el-select v-model="data.gameType" style="width: 280px;margin-right: 10px" placeholder="请选择赛事类型">
        <el-option label="羽毛球" value="羽毛球" />
        <el-option label="足球" value="足球" />
        <el-option label="篮球" value="篮球" />
        <el-option label="排球" value="排球" />
        <el-option label="射击" value="射击" />
      </el-select>
      <el-button type="primary" plain style="margin-left: 10px"  @Click="load">查询</el-button>
      <el-button type="info" plain style="margin-left: 10px " @Click="reset">重置</el-button>
      <el-button type="success" plain @Click="handeladd" v-if="user.role === '管理员'">新增</el-button>
    </div>
  </div>
  <div class="card " style="margin-bottom:18px;">

    <div>
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="70" />
        <el-table-column prop="gameId" label="赛事编号" width="100"/>
        <el-table-column prop="gameName" label="赛事名称" />
        <el-table-column prop="gameType" label="赛事类型"  />
        <el-table-column prop="gameOrganizer" label="赛事组织者"  />
        <el-table-column prop="gameMember" label="赛事参加者"  />
        <el-table-column prop="gameTime" label="赛事时间"  />
        <el-table-column prop="gameLocationName" label="比赛场馆"  />
        <el-table-column prop="gameResult" label="比赛结果"  />

        <el-table-column label="操作" width="180" v-if="user.role === '管理员'">
          <template #default="scope">
            <el-button type="primary" plain  @Click="handeledit(scope.row)">编辑</el-button>
            <el-button type="danger" plain @Click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="card">
      <el-pagination v-model:page-size="data.pageSize" v-model:current-page="data.pageNum"
                     @current-change="handelCurrentChange"
                     background layout="prev, pager, next" :total="data.total" />
  </div>
  <el-dialog  width="35%" v-model="data.formVisible" title="体育场馆信息" destroy-on-close>
    <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right" style="padding-right: 40px" >
      <el-form-item  prop="gameId" label="赛事编号" >
        <el-input v-model="data.form.gameId" autocomplete="off" placeholder="统一为1xx" />
      </el-form-item>
      <el-form-item prop="gameName" label="赛事名称" >
        <el-input  v-model="data.form.gameName" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="gameType" label="赛事类型">
        <el-select v-model="data.form.gameType" placeholder="赛事类型">
          <el-option label="羽毛球" value="羽毛球"></el-option>
          <el-option label="足球" value="足球"></el-option>
          <el-option label="篮球" value="篮球"></el-option>
          <el-option label="排球" value="排球"></el-option>
          <el-option label="射击" value="射击"></el-option>
<!--          <el-option label="乒乓球" value="乒乓球"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="赛事组织者" >
        <el-input v-model="data.form.gameOrganizer" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="赛事参加者" >
        <el-input v-model="data.form.gameMember" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="赛事时间" >
        <el-input v-model="data.form.gameTime" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="比赛场馆" >
        <el-input v-model="data.form.gameLocationName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="比赛结果" >
        <el-input v-model="data.form.gameResult" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
    <div class="dialog-footer">
      <el-button @click="data.formVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
</template>
  </el-dialog>

</template>
<script setup>
import {reactive,ref} from "vue";
  import { Search } from '@element-plus/icons-vue'
  import request from "@/utils/request";
  import {ElMessage, ElMessageBox} from "element-plus";
  const user = JSON.parse(localStorage.getItem('student-user')||'{}')
  const baseurl='/gameInfo'

  const  data =reactive({
  gameId:"",
  gameName:"",
  gameType:"",
  total:0,
  tableData:[],
  pageNum: 1,//当前页数
  pageSize:10,//每一页的个数
  formVisible:false,
  form:{}
})

  const load=() =>{
    request.get(baseurl +"/selectPage",{
      params:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        gameId: data.gameId,
        gameName: data.gameName,
        gameType: data.gameType,
      }
    }).then(res=>{
    data.tableData = res.data?.list || []
      data.total = res.data.total || 0
    })
  }

  //调用方法获取数据
  load();

  const handelCurrentChange = () => {
  //翻页后重新加载数据页面
  load()
}

  const reset =()=>{
      data.gameId = ""
      data.gameName = ""
      data.gameType = ""
      load()
  }



  const del =(id)=>{
    ElMessageBox.confirm('删除数据后无法回复，您确认删除吗？','删除确认',{type:'warning'}).then(res=> {
          request.delete(baseurl + '/delete/' + id).then(res => {
            if (res.code === '200') {
              load()
              ElMessage.success("删除成功")
            } else {
              ElMessage.error(res.msg)
            }
          })
        }) .catch(res => {})
  }

//表单校验
const rules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})

const formRef = ref()

const handeladd =()=>{
  data.form= { }
  data.formVisible=true
}


const handeledit =(row)=>{
  data.form=JSON.parse(JSON.stringify(row))
  data.formVisible=true;
}

  //保存数据到后台
const save =()=>{
    formRef.value.validate((valid) => {
      if(valid){
        request.request( {
          url:data.form.id ? baseurl + '/update': baseurl + '/add',
          method:data.form.id ? 'PUT' : 'POST',
          data:data.form
        }).then(res => {
          if (res.code ==='200'){
            load()
            data.formVisible = false //弹窗关闭
            ElMessage.success("操作成功")
          }else{
            ElMessage.error(res.msg)
          }
        })
      }
    })
  }
const handleImgUploadSuccess =(res=>{
  data.form.avatar=res.data

})

</script>